import CodeView from '../../../shared/components/CodeView.jsx';
import { getDisplayElementById } from '../../shared/helpers';
import * as Base from './example';

<div className="doc lead">
  A vertical list.
</div>

## Base
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-list')}
</CodeView>

## Examples

### Dotted
<CodeView>
  {getDisplayElementById(Base.examples, 'unordered-list-decimal')}
</CodeView>

### Decimal
<CodeView>
  {getDisplayElementById(Base.examples, 'ordered-list-decimal')}
</CodeView>

### Links
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-list-links')}
</CodeView>

### Block Links
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-list-block-links')}
</CodeView>

### Block Links with Space
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-list-block-links-space')}
</CodeView>

### Inline Block Links
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-list-inline-block-links')}
</CodeView>

### Inline Block Links with Space
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-list-inline-block-links-space')}
</CodeView>

### Nested Vertical Lists
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-list-nested')}
</CodeView>

### Top
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-top')}
</CodeView>

### Top with Space
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-top-space')}
</CodeView>

### Top with Link
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-link-top')}
</CodeView>

### Top with Link and Space
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-link-top-space')}
</CodeView>

### Bottom
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-bottom')}
</CodeView>

### Bottom with Space
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-bottom-space')}
</CodeView>

### Bottom with Link
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-link-bottom')}
</CodeView>

### Bottom with Link and Space
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-link-bottom-space')}
</CodeView>

### Around
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-around')}
</CodeView>

### Around with Space
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-around-space')}
</CodeView>

### Around with Link
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-link-around')}
</CodeView>

### Around with Link and Space
<CodeView>
  {getDisplayElementById(Base.examples, 'vertical-dividers-link-around-space')}
</CodeView>
